// import React from "react";
// import "./03-style.css";

// const red = false;
// const App = () => {
//   return (
//     <>
//       <h2>不同条件添加不同样式</h2>
//       {/* 通常情况下，可以使用三目来解决问题 */}
//       {/* <p className={red ? "red" : "green"}>hello react!!</p> */}
//     </>
//   );
// };

// export default App;

import React from "react";
import classNames from "classnames/bind";
import styles from "./03-style.css";

let cx = classNames.bind(styles);

let show = true;
let a = 1;

class App extends React.Component {
  render() {
    let className = cx({
      // 要传入一个对象，key是类名，value就是表达式
      red: show && a === 1,
      big: 2 < 1,
    });
    return (
      <>
        <h2>不同条件添加不同样式</h2>
        <p className={className}>hello react!!</p>
      </>
    );
  }
}

export default App;
